<template>
    <div style="padding-top: 1px">
        <div class="singer">
            <ul class="singer-header">
                <li v-for="(item, index) in singerSex" :key="index"
                    @click="goSingerListOfSex(item)"
                    :class="{active: item.name == activeName}">
                    {{item.name}}
                </li>
            </ul>
            <div>
                <content-list :content-list="data"></content-list>
                <div class="pagination">
                    <el-pagination
                            @current-change="handleCurrentChange"
                            background
                            layout="total, prev, pager, next"
                            :current-page="currentPage"
                            :page-size="pageSize"
                            :total="albumDatas.length">
                    </el-pagination>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import ContentList from "@/components/ContentList";
    import {getAllSinger, getSingerOfSex} from "@/api";
    import {mixin} from "@/mixins";
    import {singerSex} from "@/assets/data/singer";

    export default {
        name: "Singer",
        mixins: [mixin],
        components: {ContentList},
        data(){
            return{
                albumDatas: [],     //歌手数据
                pageSize: 10,       //页面数据数量，一页有15条数据
                currentPage: 1,     //当前页，默认第一页
                singerSex: [],      //性别
                activeName: '全部歌手',     //当前分类
            }
        },
        computed:{
            //计算当前表格中的数据
            data(){
                return this.albumDatas.slice((this.currentPage - 1) * this.pageSize, this.currentPage * this.pageSize);
            }
        },
        mounted(){
            this.singerSex = singerSex;
            this.getSingerList();
        },
        methods:{
            getSingerList(){
                getAllSinger(this.$route.query.keywords)
                    .then(res => {
                        this.currentPage = 1;
                        this.albumDatas = res;
                    });
            },
            //获取当前页
            handleCurrentChange(val){
                this.currentPage = val;
            },
            //根据性别查询对应的歌手
            goSingerListOfSex(singer){
                this.activeName = singer.name;
                this.albumDatas = [];
                if(singer.name == '全部歌手'){
                    this.getSingerList();
                }else{
                    this.handleChangeView(singer.type);
                }
            },
            //根据性别查询对应的歌手
            handleChangeView(sex){
                getSingerOfSex(sex).then(res => {
                    this.currentPage = 1;
                    this.albumDatas = res;
                })
            }
        }
    }
</script>

<style lang="scss" scoped>
    @import "../assets/css/singer";
</style>